<template>
  <div class="contract">
    <el-dialog :visible.sync="visible">
      <div class="contract-container">
        <div class="panelWrap contract-content">
          <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20" style="height: 40px">
            <div>{{ isEdit ? '修改维保合同' : '添加维保合同' }}</div>
            <i class="el-icon-close" @click="handleCloseDialog" />
          </div>
          <div class="contract-main flex flexdc m-t-15">
            <div>
              <div class="main-cont flex">
                <div class="m-r-60">
                  <div class="entryName m-b-15">
                    <span class="name"><span class="mustval">*</span>维保单位：</span>
                    <el-input v-model="form.maUnitName" readonly class="unit-input" placeholder="请选择维保单位" />
                    <el-button type="warning" class="unitbtn m-l-10" @click="handleSelUnit(0)">选择单位</el-button>
                  </div>
                  <div class="demand m-b-15">
                    <span class="name"><span class="mustval">*</span>使用单位：</span>
                    <el-input v-model="form.userUnitName" readonly class="unit-input" placeholder="请选择使用单位" />
                    <el-button type="warning" class="unitbtn m-l-10" @click="handleSelectUnit">选择单位</el-button>
                  </div>
                  <div class="entryName m-b-15">
                    <span class="name"><span class="mustval">*</span>使用小区：</span>
                    <el-input v-model="form.maUnitName" readonly class="unit-input" placeholder="请选择使用小区" />
                    <el-button type="warning" class="unitbtn m-l-10" @click="handleVillage">选择小区</el-button>
                  </div>
                  <!-- <div class="maType m-b-15">
                    <span class="name"><span class="mustval">*</span>合同编号：</span>
                    <el-input v-model="form.contractNumbe" class="co-input" placeholder="请输入维保合同编号" />
                  </div> -->
                  <div class="demand">
                    <span class="name"><span class="mustval">*</span>合同金额：</span>
                    <el-input v-model="form.price" class="co-input" placeholder="请输入合同金额" />
                  </div>
                  <div class="demand m-t-15">
                    <span class="name"><span class="mustval">*</span>维保方式：</span>
                    <el-select v-model="form.method" class="co-input main-select" placeholder="请选择维保方式">
                      <el-option
                        key="1"
                        label="强制维保"
                        value="1"
                      />
                    </el-select>
                  </div>
                </div>
                <div>
                  <div class="creDate co-date m-b-15">
                    <span class="name"><span class="mustval">*</span>合同签订时间：</span>
                    <el-date-picker
                      v-model="form.startDate"
                      type="date"
                      class="co-input m-l-20"
                      placeholder="选择合同签订日期"
                    />
                  </div>
                  <div class="co-date lasDate m-b-15">
                    <span class="name"><span class="mustval">*</span>合同结束时间：</span>
                    <el-date-picker
                      v-model="form.endDate"
                      type="date"
                      class="co-input m-l-20"
                      placeholder="选择合同结束日期"
                    />
                  </div>
                  <!-- 上传图片 -->
                  <uploadImg :state="type" :tip="tip" :pic-url="form.filePath" class="up-img flex" @sendImginfo="handleImg" />
                </div>
              </div>
              <el-divider>电梯选择面板</el-divider>
              <!-- 电梯列表 -->
              <PublicElevator @update="handelPubUpdate" />
            </div>

            <div class="flexcenter footer m-t-20 m-b-20">
              <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
              <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
              <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <ContUnit v-model="contVisible" @update="handleCoUnitUpdate" />
    <!-- 选择单位 -->
    <UserUnit v-model="unitVisible" @update1="handleUnitUpdate" />
  </div>
</template>

<script>

import { showNotice } from '@/utils/toolclass'
import PublicElevator from '@/components/publicElevator/index'
import uploadImg from '@/components/uploadImg/index'
import UserUnit from '@/components/userUnit/index'
import { miContAdd, miContUpdate } from '@/api/maintenance/contract'
import ContUnit from './contUnit'
import storage from '@/utils/storage'
import bus from '@/utils/bus'

export default {
  components: { ContUnit, UserUnit, PublicElevator, uploadImg },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      unitVisible: false,
      contVisible: false,
      form: { ...this.data },
      tip: '图片不能超过100KB',
      type: 1
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      // console.log(v)
      this.form = { ...v }
    }
  },
  created() {
    this.userInfo = JSON.parse(storage.get('userInfo'))
  },
  mounted() {},
  methods: {
    handleVillage() {
      //
    },
    handleSelectUnit() {
      this.contVisible = true
      this.type = 1
    },
    // 选择使用单位
    handleCoUnitUpdate(row) {
      // console.log(row)
      this.form.userUnitId = row.id
      this.form.userUnitName = row.name
    },
    handleSelUnit(type) {
      this.unitVisible = true
      bus.$emit('type', type)
    },
    // 选择维保单位
    handleUnitUpdate(row) {
      // console.log(row)
      this.form.maUnitName = row.name
      this.form.maUnitId = row.id
    },
    handleImg(img) {
      // console.log(img)
      this.form.file = img.imgfile
      this.form.filePath = img.base64Val
      // console.log(img.base64Val)
    },
    handelPubUpdate(rows) {
      // console.log(rows)
      this.form.elecatorList = rows.map(item => item.id)
      // console.log(this.form.elecatorList)
    },
    handleSave(type) {
      if (!(/^\S+$/.test(this.form.userUnitName))) {
        showNotice('error', '提示', '请输入手机号')
        return
      }
      if (!(/^\S+$/.test(this.form.userUnitName))) {
        showNotice('error', '提示', '请输入手机号')
        return
      }
      if (!(/^\S+$/.test(this.form.userUnitName))) {
        showNotice('error', '提示', '请输入手机号')
        return
      }
      if (!(/^\S+$/.test(this.form.userUnitName))) {
        showNotice('error', '提示', '请输入手机号')
        return
      }
      if (!(/^\S+$/.test(this.form.userUnitName))) {
        showNotice('error', '提示', '请输入手机号')
        return
      }
      if (!(/^\S+$/.test(this.form.elecatorList))) {
        showNotice('error', '提示', '请选择电梯')
        return
      }

      const params = {
        contractNumbe: this.form.contractNumbe, // 合同编号
        crtDate: this.form.crtDate, // 创建时间
        crtOpr: this.form.crtOpr, // 创建人
        endDate: this.$moment(this.form.endDate).format('YYYY-MM-DD h:mm:ss'), // 结束时间
        file: this.form.filePath, // 合同文件路径
        id: this.form.id, // ID
        lstEdtDate: this.form.lstEdtDate, // 最后修改时间
        lstEdtOpr: this.form.lstEdtOpr, // 最后修改人ID
        maUnitId: this.form.maUnitId, // 维保单位ID
        maUnitName: this.form.maUnitName, // 维保单位名称
        method: this.form.method === '按需维保' ? 1 : 2, // 维保方式(1:按需维保，2：强制维保)
        orgId: this.form.orgId, // 机构id
        price: this.form.price, // 价格
        startDate: this.$moment(this.form.startDate).format('YYYY-MM-DD h:mm:ss'), // 开始时间
        userUnitId: this.form.userUnitId, // 使用单位ID
        userUnitName: this.form.userUnitName, // 使用单位名称
        version: this.form.version, // 版本号
        elecatorList: this.form.elecatorList
      }
      const form1 = new FormData()

      form1.append('contractNumbe', this.form.contractNumbe) // 合同编号
      form1.append('crtDate', this.form.crtDate === '' ? '' : this.$moment(this.form.crtDate).format('YYYY-MM-DD h:mm:ss')) // 创建时间
      form1.append('crtOpr', this.form.crtOpr) // 创建人
      form1.append('endDate', this.form.endDate === '' ? '' : this.$moment(this.form.endDate).format('YYYY-MM-DD h:mm:ss')) // 结束时间
      form1.append('file', this.form.file) // 合同文件路径
      this.form.fileImage === undefined ? form1.append('filePath', this.form.filePath) : form1.append('filePath', this.form.fileImage) // 合同文件路径
      form1.append('id', this.form.id) // ID
      form1.append('lstEdtDate', this.form.lstEdtDate === '' ? '' : this.$moment(this.form.lstEdtDate).format('YYYY-MM-DD h:mm:ss')) // 最后修改时间
      form1.append('lstEdtOpr', this.form.lstEdtOpr) // 最后修改人ID
      form1.append('maUnitId', this.form.maUnitId) // 维保单位ID
      form1.append('maUnitName', this.form.maUnitName) // 维保单位名称
      form1.append('method', this.form.method === '按需维保' ? 1 : 2) // 维保方式(1:按需维保，2：强制维保)
      form1.append('orgId', this.form.orgId === '' ? this.userInfo.orgList[0].id : this.form.orgId) // 机构id
      form1.append('price', this.form.price) // 价格
      form1.append('startDate', this.form.startDate === '' ? '' : this.$moment(this.form.startDate).format('YYYY-MM-DD h:mm:ss')) // 开始时间
      form1.append('userUnitId', this.form.userUnitId) // 使用单位ID
      form1.append('userUnitName', this.form.userUnitName) // 使用单位名称
      form1.append('version', this.form.version) // 版本号
      form1.append('elecatorList', this.form.elecatorList)
      form1.append('status', this.form.status === '签订' ? 1 : this.form.status === '已解除' ? 2 : 3)
      // console.log(params)
      // console.log(this.form)
      // console.log(this.form.orgId)
      // console.log(this.userInfo.orgList[0].id)
      if (type === 0) {
        // this.handleAdd(params)
        this.handleAdd(form1)
        this.form.elecatorList = []
      } else {
        this.handleUpdate(form1)
      }
    },
    handleAdd(data) {
      miContAdd(data).then(res => {
        if (res.code === '000000') {
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
          showNotice('success', '提示', '添加成功')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '添加失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleUpdate(data) {
      miContUpdate(data).then(res => {
        if (res.code === '000000') {
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
          showNotice('success', '提示', '更新成功')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '更新失败')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleCloseDialog() {
      this.visible = !this.visible
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/public.scss";
.contract {
  .contract-container {
    margin-top: -130px;
    width: 1000px;
    background: #ffffff;
    margin-left: -200px;
    border-radius: 5px;
    .contract-content {
      .contract-main {
        // min-height: 560px;
        // align-items: center;
        .main-cont {
          justify-content: center;
        }
        .co-date {
          margin-left: -28px;
        }
      }
    }
  }
  .up-img {
    .uploadImgfile {
      margin: 0 14px 0 -20px;
      padding: 0 10px;
    }
    .previewImg {
      margin-top: -2px;
      .img {
        width: 260px;
        height: 150px;
      }
    }
  }
  .unit-input {
    width: 146px;
  }
  .unitbtn {
    width: 100px;
  }
  .footer {
    .btn {
      height: 40px;
    }
  }
}
</style>
